import type { CompanyInfoDto, CompanyProductInfoDto, EleSignInfoDto, PeriodInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'

import { downloadFile } from '@/utils/util'
import type { WesureRecordDto } from '@/api/insurance/daily/types'
import { ElesignFlowStatusCnEnum, ElesignFlowStatusEnum, getKeyToEnum } from '@/const/enum'
import { exportElesignContactRecord, getEleContractRecordList } from '@/api/company'
import type { TagType } from '@/api/types'
import { Button, Tag } from 'ant-design-vue'
import dayjs from 'dayjs'

@Component
export class ContractRecord extends TableRender {
    @Prop() eleSignInfo!: PeriodInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    noTablePadding = true
    noFilterPadding = true
    filterTheme = 'light'

    curItem = {} as WesureRecordDto

    curMonthFirstDay = dayjs().startOf('month').format()
    curMonthLastDay = dayjs().endOf('month').format()

    filterConfig() {
        return {
            searchName: {
                name: '搜索',
                element: 'input',
                placeholder: '请输入企业/合同名称'
            },
            searchFields: {
                name: '签署人',
                element: 'input',
                placeholder: '请输入姓名/身份证号'
            },
            flowStatus: {
                name: '签署状态',
                element: 'select',
                options: getKeyToEnum(ElesignFlowStatusCnEnum, true)
            },
            createOn: {
                name: '发起时间',
                element: 'datetime',
                type: 'date',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            },
            deadline: {
                name: '截止时间',
                element: 'datetime',
                type: 'date',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        // { type: 'checkbox', width: 50, fixed: 'left' },
        {
            field: 'serveCompanyName',
            title: '企业名称',
            width: 200
        },
        {
            field: 'flowStatus',
            title: '签署状态',
            params: {
                colors: {
                    INIT: 'blue-200',
                    ALL: 'green',
                    DEADLINE: 'gray-200',
                    REJECT: 'red',
                    CANCEL: 'gray-200'
                }
            },
            formatter: ({ row }: VxeColumnSlotTypes.ContentSlotParams) => {
                return ElesignFlowStatusEnum[row.flowStatus as keyof typeof ElesignFlowStatusEnum]
            },
            slots: {
                default: 'status'
                // ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                //     const typeMap = {
                //         INIT: 'success',
                //         ALL: 'primary',
                //         DEADLINE: 'info',
                //         REJECT: 'danger',
                //         CANCEL: 'info'
                //     }
                //     return (
                //         <Tag color={typeMap[row.flowStatus as keyof typeof typeMap] as TagType}>
                //             {
                //                 ElesignFlowStatusEnum[
                //                     row.flowStatus as keyof typeof ElesignFlowStatusEnum
                //                 ]
                //             }
                //         </Tag>
                //     )
                // }
            }
        },
        {
            field: 'userName',
            title: '签署人'
        },
        {
            field: 'idCardNo',
            title: '身份证',
            width: 160
        },
        {
            field: 'flowName',
            title: '合同名称',
            width: 180
        },
        {
            field: 'labourCost',
            title: '工价',
            formatter: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                return row.labourCost ? row.labourCost + '/小时' : '--'
            }
        },
        {
            field: 'createOn',
            title: '发起时间',
            width: 150
        },
        {
            field: 'deadline',
            title: '截止时间',
            width: 150
        },
        {
            field: 'flowMessage',
            title: '签署信息'
        },
        {
            field: 'emergencyContact',
            title: '紧急联系人'
        },
        {
            field: 'emergencyContactPhone',
            title: '紧急联系人手机号',
            width: 160
        },
        {
            field: 'emergencyContactAddr',
            title: '紧急联系人地址',
            width: 160
        }
    ] as TableRenderColumnTypes<EleSignInfoDto>

    async onExport() {
        const data = this.getFilters()
        const res = await exportElesignContactRecord({
            companyId: this.eleSignInfo.companyId,
            ...data
        })
        downloadFile(res)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.eleSignInfo?.companyId) return []
        return getEleContractRecordList({
            companyId: this.eleSignInfo.companyId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    renderRightBtns() {
        return (
            <>
                {/* <Button type="primary" onClick={this.onExport}>
                    导出列表
                </Button> */}
            </>
        )
    }

    render() {
        return super.render()
    }
}

export default toNative<
    { eleSignInfo: EleSignInfoDto; companyProductInfo: CompanyProductInfoDto },
    { refresh: () => void }
        >(ContractRecord)
  